<template>
  <div class="container">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <transition name="slide">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <router-view name="footer"></router-view>
  </div>
</template>

<style lang="scss">
*{ margin:0; padding: 0;list-style:none;}
em,i{font-style:normal}
html,body,.container {width: 100%;height:100%;}
html {font-size:26.6666666666vw;}
@media all and (orientation: landscape) {
  html {font-size:100px;}
}
body{font-size: 12px;}
.container{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .box{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .header{
      // height: 44px;
      height: 0.44rem;
      background-color: #f66;
    }
    .content{
      flex: 1;
      overflow: auto;
    }
  }
  .footer{
    // height: 50px;
    height: 0.5rem;
    background-color: #efefef;
    ul{
      width: 100%;
      height: 100%;
      display: flex;
      li{
        height: 100%;
        display: flex;
        flex:1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.router-link-exact-active.router-link-active{
          color:#f66;
        }
        span{
          font-size:24px;
        }
      }
    }
  }
}
.slide-enter {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all 0.5s;
}
.slide-enter-to {
  transform: translateX(0);
}
.slide-leave {
  transform: translateX(0);
}
.slide-leave-active {
  transition: all 0s;
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>
